// @ts-nocheck
/* eslint-disable no-var */
import React, {useState, useEffect} from 'react';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as THREE from 'three';

export default function ThreeBase() {
    var scene;
    var camera;
    var controls;
    var mesh;
    var renderer;
    useEffect(() => {
        console.log('ddd');
        threeStart();
    }, []);

    let stats;
    const initThree = () => {
        const width = document.getElementById('threeMain').clientWidth;
        const height = document.getElementById('threeMain').clientHeight;
        renderer = new THREE.WebGLRenderer({
            antialias: true,
        });
        renderer.setSize(width, height);
        document.getElementById('threeMain').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF, 1.0);
        // document.getElementById('threeMain').appendChild(stats.domElement);
    };

    const initCamera = (width, height) => {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 600;
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt({
            x: 0,
            y: 0,
            z: 0,
        });
    };

    const initScene = () => {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xbfd1e5);
    };

    const initLight = () => {
        console.log('initLight', scene);
        const amlight = new THREE.AmbientLight(0xFF0000);
        amlight.position.set(100, 100, 200);
        scene.add(amlight);
        const pointlight = new THREE.PointLight(0x00FF00);
        pointlight.position.set(0, 0, 300);
        scene.add(pointlight);
    };

    const initObject = () => {
        const geometry = new THREE.CylinderGeometry(100, 150, 400);
        const material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
        geometry.position = new THREE.Vector3(0, 0, 0);
        mesh = new THREE.Mesh(geometry, material);
        // mesh.position.set(new THREE.Vector3(0, 0, 0));
        scene.add(mesh);
    };

    function initControl() {
        // 将renderer关联到container，这个过程类似于获取canvas元素
        const pcanvas = document.getElementById('threeMain');
        controls = new OrbitControls(camera, pcanvas);

        // 如果使用animate方法时，将此函数删除
        // controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
        // controls.dampingFactor = 0.25;
        // 是否可以缩放
        controls.enableZoom = true;
        // 是否自动旋转
        // controls.autoRotate = true;
        controls.autoRotateSpeed = 0.5;
        // 设置相机距离原点的最近距离
        // controls.minDistance  = 10;
        // 设置相机距离原点的最远距离
        controls.maxDistance = 10000;
        // 是否开启右键拖拽
        controls.enablePan = true;
    }

    function threeStart() {
        const width = document.getElementById('threeMain').clientWidth;
        const height = document.getElementById('threeMain').clientHeight;
        initThree();
        initCamera(width, height);
        initScene();
        initLight();
        initControl();
        initObject();
        animation();
    }

    function animation() {
        mesh.rotateY(0.01);
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    return (
        <div id="threeMain" style={{width: '100%', height: '300px'}}/>
    );
}

